<template>
    <div class="container">
        <div id="myChart" style="width: 100%; height: 300px"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({
    head() {
        return {
            title: 'test2',
            script: [{ src: 'https://lib.baomitu.com/echarts/5.2.0/echarts.min.js' }],
        }
    },
})
export default class Test2Page extends Vue {
    mounted() {
        const myChart = (window as any).echarts.init(document.getElementById('myChart'))
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                name: 'x轴名称',
            },
            yAxis: {
                type: 'value',
                name: 'y轴名称',
            },
            series: [
                {
                    name: '折线1',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                },
                {
                    name: '折线2',
                    data: [620, 711, 823, 934, 1445, 1456, 1178],
                    type: 'line',
                },
            ],
            legend: {
                data: ['折线1', '折线2'],
            },
            tooltip: {
                trigger: 'axis',
            },
        })
    }
}
</script>
